<div class="content-inner">
<form action="<?=site_url(array("c"=>"cms_gallery","m"=>"browse_media"))?>" method="post" id="media_search">
	<div class="form-search">
		<table class="" cellpadding="5" cellspacing="0" style="">
			<tbody>
				<tr>
					<td>Group</td>
					<td><select name="group" style="width: 234px;" id="group">
						<option value="">All</option>
						<?php if(is_array($media_set)):?>
						<?php foreach($media_set as $item):?>
						<option value="<?=$item['id']?>" <?= $group == $item['id']? 'selected="true"' : ''?>>
							<?=$item['title']?>
						</option>
						<?php endforeach;?>
						<?php endif;?>
						</select>
					</td>
					<td>From </td>
					<td>
						<input type="text" id="f_rangeStart" name="fromdate" value="<?=$fromdate?>" maxlength="10" size="14"/>
						&nbsp;to&nbsp;
						<input type="text" id="t_rangeStart" name="todate" value="<?=$todate?>" maxlength="10" size="14"/>
					</td>
					<td rowspan="2"><input name="search" type="button" class="" value="Search" id="search" /></td>
				</tr>
			</tbody>
		</table>
	</div>
</form>
</div>
<div class="content-inner">
	<div class="gallery">
		<div class="actions">
		<a href="<?=site_url(array('c' => 'cms_gallery', 'm' => 'add_media'))?>" title="Add Image">
			<img src="<?=public_base_url()?>admin/images/function/add.gif" width="106" height="31" border="0">
		</a>
		</div>
		<div class="gallery-grid">
			<?php if(!empty($img_list)):$i=0?>
			<?php foreach($img_list as $item):?>
			<div class="item" id="media_<?=$item['id']?>" align="center">
				<h5 class="ui-widget-header" id="media_title<?=$item['id'];?>"><?=$item['title']?></h5>
				<a href="<?=$media_thumb['user_media_url'].$item['filename']?>" title="<?=$item['content']?>" class="customGal">
					<img src="<?=$media_thumb['user_media_url'].$item['rawname'].$media_thumb['thumb_marker'].$item["fileext"]?>" alt="<?=$item['title']?>" width="120" height="80"/>
				</a>
				<p>
					<a href="<?=site_url(array('c' => 'cms_gallery', 'm'=>'edit_media', 'id'=>$item['id']))?>" class="ajax-edit">Edit</a> | 
					<a href="<?=site_url(array('c' => 'cms_gallery', 'm'=>'delete_media', 'id'=>$item['id']))?>" class="delete">Delete</a>
				</p>
			</div>
			<?php $i++;endforeach;?>
			<div class="clearfix"></div>
			<?php else:?>
			<h3>Please upload image for this gallery</h3>
			<?php endif;?>
		</div>
		<div id="pagination"><?=$this->pagination->create_links();?></div>
	</div>
	<div id="dialog-confirm" title="Delete image?" style="display: none;">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This image will be permanently deleted and cannot be recovered. Are you sure?</p>
	</div>
</div>
<script language="JavaScript" type="text/javascript">
(function($){
	$('a.customGal').zoomimage({
		border: 20,
		centered: true,
		hideSource: true
	});

	$('a.delete').click(function(){
		var href = $(this).attr("href");
		$("#dialog-confirm").dialog({
			resizable: false,
			height:180,
			modal: true,
			buttons: {
				'Delete': function() {
					jQuery.getJSON(href, {},function(data){
						$("#media_"+data.image_id).remove();
					});
					$(this).dialog('close');
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
		return false;
	});
	
	$("a.ajax-edit").click(function(){
		$('#dialog').load($(this).attr('href'));
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 310,
			width: 640,
			title: 'Edit Media',
			modal: true,
			buttons: {
				'Save': function() {
					// Validation
					$('#mediaForm').ajaxForm({
						success: function(data){
							$("#media_title"+data.id).html(data.media_title);							
							$("#dialog").dialog('close');
							//alert(data.message);							
						},
						dataType: 'json'
					});
		            $('#mediaForm').submit();
					$("#dialog").dialog('close');
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				$('#mediaForm input').val('').removeClass('ui-state-error');
			}
		});
		$("#dialog").dialog("open");
		return false;
	});

	$('#pagination a').click(function(){
		var link = $(this).attr('href');
		$("#ui-tabs-2").load(link);
		return false;
	});

	$("#f_rangeStart").datepicker({dateFormat: 'yy-mm-dd'});
	$("#t_rangeStart").datepicker({dateFormat: 'yy-mm-dd'});


	$("#search").click(function(){
		var link = $("#media_search").attr("action");
		var group_media = $("#group").attr("value");
		form = $("input[name='fromdate']").attr('value');
		to = $("input[name='todate']").attr('value');
		t = $.post(link,
				   { group: group_media , fromdate: form, todate: to},
					 function(data){
						 $("#ui-tabs-2").html(data);
					 }
		);
		return false;
	});
})(jQuery);
</script>
